The HTML <article> tag is used to show an independent, self-contained piece of content within a webpage. It's typically used for content that can stand alone and be reused independently from the rest of the content on a webpage
Here's why and how it's used:
Semantic Structure: It helps to semantically mark up content that shows a standalone article, blog post, forum post, or any other independent piece of content.
Accessibility: It aids in ease of access by providing screen readers and other assistive technologies with a clear indication of where an article begins and ends, making it easier for users to navigate through content.
Example:
<article>
<h2>Article Title</h2>
<p>This is the content of the article...</p>
<!-- Additional content such as images, lists, etc. -->
</article>Examples of where the <article> element can be used:
- Forum posts
- Blog posts
- User comments
- Product cards
- Newspaper articles
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Page Title</title>
<style type="text/css">
*{
font-family: system-ui, Arial;
font-size: large;
}
.main{
background-color: #a3dbdb30;
}
article{
border-bottom: 1px solid black;
}
article h2{
font-size: 24px;
font-weight: semibold;
}
</style>
</head>
<body>
<main class="main">
<h1>The article element</h1>
<article>
<h2>Safari</h2>
<p>Safari is a web browser developed by Apple Inc., first released in 2003. Safari is the default browser on Apple devices and is known for its speed and efficiency.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
<article>
<h2>Opera</h2>
<p>Opera is a web browser developed by Opera Software. It is known for its innovative features like built-in ad blocker and VPN. Opera has a small but dedicated user base.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
<article>
<h2>Brave</h2>
<p>Brave is a privacy-focused web browser developed by Brave Software. It offers features like ad blocking and privacy protection by default. Brave has gained popularity among users concerned about online privacy.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</main>
</body>
</html>Output -
Determining whether to nest <article> within <section> or vice versa can be a common dilemma in HTML coding. The <article> element indicates standalone, self-contained content, while the <section> element defines a specific section within a document. However, these definitions do not necessarily dictate the nesting structure.
Therefore, it is not uncommon to come across HTML pages where <section> elements encompass <article> elements, and vice versa. Ultimately, the choice of how to nest these elements depends on the specific content and organization of the web page.
Leave Comment